import LikeIcon from "src/assets/icons/like.svg";
import List from "src/components/List";
import Collapse from "src/components/Collapse";
import style from "./AssistantMessageContent.module.css";
type AssistantMessageContentProps = Omit<
  AssistantMessageInterface,
  "done" | "id" | "role"
>;

export default function AssistantMessageContent(
  props: AssistantMessageContentProps
) {
  const { content, graph, recommend, retrieval } = props;

  const listData = [
    ...graph.map((item) => {
      return {
        type: "table",
        title: [item["人物"], "CBDB"],
        data: item["属性"],
      };
    }),
    ...retrieval.map((item) => {
      return {
        type: "normal",
        title: [item.title + " " + item.volume, "四库全书"],
        data: item.text,
      };
    }),
  ];

  return (
    <div className={style.content}>
      <div className={style.message}>
        <div>{content}</div>
        <div className={style.actions}>
          <button className={style.like}>
            <LikeIcon height={20} width={20} />
          </button>
          <button className={style.dislike}>
            <LikeIcon height={20} width={20} />
          </button>
        </div>
      </div>
      {recommend.length > 0 && (
        <div className={style.questions}>
          <List
            title="尝试以下问题："
            data={recommend}
            renderItem={(text, index) => <div key={index}>{text}</div>}
          />
        </div>
      )}
      {listData.length > 0 && (
        <div className={style.source}>
          <List
            title="信息来源："
            data={listData}
            renderItem={(item, index) => (
              <Collapse
                key={index}
                renderTitle={() => (
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                    }}
                  >
                    <span>{item.title[0]}</span>
                    <span
                      style={{ fontSize: "0.9em", color: "rgba(0, 0, 0, 0.5)" }}
                    >
                      {item.title[1]}
                    </span>
                  </div>
                )}
                renderContent={() => {
                  if (item.type === "table") {
                    return (
                      <div className={style.graphTable}>
                        {Object.entries(
                          item.data as { [k: string]: string }
                        ).map(([k, v]) => (
                          <Collapse
                            key={k}
                            renderTitle={() => <div>{k}</div>}
                            renderContent={() => (
                              <div
                                style={{
                                  padding: "3px 16px",
                                  backgroundColor: "rgba(0, 0, 0, 0.05)",
                                  borderRadius: 4,
                                }}
                              >
                                {v}
                              </div>
                            )}
                          />
                        ))}
                      </div>
                    );
                  }
                  return <p className={style.retrievalText}>{item.data}</p>;
                }}
              />
            )}
          />
        </div>
      )}
    </div>
  );
}
